<script setup>
import {computed, reactive,ref, unref} from "vue";
import { StarFilled } from '@element-plus/icons-vue';
import { ClickOutside as vClickOutside} from 'element-plus';
function ttt(item,e){
    // e.preventDefault();
    // console.log("popoverRef：",unref(popoverRef).popperRef);
    // console.log("e:",e);
    e.preventDefault();
    let theB = item.visible;
    editableTabs.value.forEach(ele=>ele.visible = false);
    item.visible = !theB;
    editableTabsValue.value = item.name;
}



const popoverRef = ref()
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
}
const visible = ref(false)



const activeName = ref('first')

const handleClick = (tab, event) => {
    console.log(tab, event)
}


let tabIndex = 4
const editableTabsValue = ref('2')
const editableTabs = ref([
    {
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content',
        visible:false,
    },
    {
        title: 'Tab 2',
        name: '2',
        content: 'Tab 2 content',
        visible:false,
    },{
        title: 'Tab 3',
        name: '3',
        content: 'Tab 3 content',
        visible:false,
    },{
        title: 'Tab 4',
        name: '4',
        content: 'Tab 4 content',
        visible:false,
    },
])

const addTab = (targetName) => {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
        title: 'New Tab',
        name: newTabName,
        content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
}

const removeTab = (targetName) => {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
        tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    activeName = nextTab.name
                }
            }
        })
    }
    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}

</script>

<template>




    <el-popover
        ref="popover"
        title="Title"
        :width="200"
        trigger="contextmenu"
        content="this is content, this is content, this is content"
    >
        <template #reference>
            <el-button class="m-2">contextmenu to activate</el-button>
        </template>
    </el-popover>

<!--    <el-popover-->
<!--        :visible="visible"-->
<!--        placement="bottom"-->
<!--        title="Title"-->
<!--        :width="200"-->
<!--        content="this is content, this is content, this is content"-->
<!--    >-->

<!--&lt;!&ndash;        <template #reference>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-button class="m-2" @click="visible = !visible">Manual to activate</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;        </template>&ndash;&gt;-->
<!--        skldflkj-->
<!--    </el-popover>-->

            <div style="margin-bottom: 20px">
                <el-button size="small" @click="addTab(editableTabsValue)">
                    add tab
                </el-button>
            </div>

    <el-tabs
        v-model="editableTabsValue"
        type="border-card"
        class="demo-tabs"
        closable
        @tab-remove="removeTab"
    >
        <el-tab-pane v-for="item in editableTabs"
                     :key="item.name"
                     :label="item.title"
                     :name="item.name"
                     @click.right.prevent.passive="$event.preventDefault();"
                     @contextmenu.prevent.passive="$event.preventDefault();">
            <template #label>
                <el-popover
                    :visible="item.visible"
                    placement="bottom"
                    title="Title"
                    :width="200"
                    content="this is content, this is content, this is content"
                >

                    <template #reference>
                        <div @contextmenu="ttt(item, $event)" style="text-align:center;width: 30px;height:25px;padding-top:3px;padding-left: 20px">{{item.name}}</div>
<!--                        <div style="width: 30px">{{item.name}}</div>-->
                    </template>
                    test1
                </el-popover>
            </template>
            {{ item.content }}
        </el-tab-pane>
    </el-tabs>

<!--        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
<!--            <el-tab-pane label="User" name="first">User</el-tab-pane>-->
<!--            <el-tab-pane name="test1">-->
<!--                <template #label>-->
<!--                    <el-popover-->
<!--                        :visible="visible"-->
<!--                        placement="bottom"-->
<!--                        title="Title"-->
<!--                        :width="200"-->
<!--                        content="this is content, this is content, this is content"-->
<!--                    >-->

<!--                        <template #reference>-->
<!--                            <span @contextmenu="ttt">test1</span>-->
<!--                        </template>-->
<!--                        test1-->
<!--                    </el-popover>-->
<!--                </template>-->
<!--                test1-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="Config" name="second">Config</el-tab-pane>-->
<!--            <el-tab-pane label="Role" name="third">Role</el-tab-pane>-->
<!--            <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>-->
<!--        </el-tabs>-->




<!--    <template>-->
<!--        <div style="margin-bottom: 20px">-->
<!--            <el-button size="small" @click="addTab(editableTabsValue)">-->
<!--                add tab-->
<!--            </el-button>-->
<!--        </div>-->
<!--        <el-tabs-->
<!--            v-model="editableTabsValue"-->
<!--            type="card"-->
<!--            class="demo-tabs"-->
<!--            closable-->
<!--            @tab-remove="removeTab"-->
<!--        >-->
<!--            <el-tab-pane-->
<!--                v-for="item in editableTabs"-->
<!--                :key="item.name"-->
<!--                :label="item.title"-->
<!--                :name="item.name"-->
<!--            >-->
<!--                {{ item.content }}-->
<!--            </el-tab-pane>-->
<!--        </el-tabs>-->
<!--    </template>-->
<!--    <script lang="ts" setup>-->
<!--        import { ref } from 'vue'-->

<!--        let tabIndex = 2-->
<!--        const editableTabsValue = ref('2')-->
<!--        const editableTabs = ref([-->
<!--            {-->
<!--                title: 'Tab 1',-->
<!--                name: '1',-->
<!--                content: 'Tab 1 content',-->
<!--            },-->
<!--            {-->
<!--                title: 'Tab 2',-->
<!--                name: '2',-->
<!--                content: 'Tab 2 content',-->
<!--            },-->
<!--        ])-->

<!--        const addTab = (targetName: string) => {-->
<!--            const newTabName = `${++tabIndex}`-->
<!--            editableTabs.value.push({-->
<!--                title: 'New Tab',-->
<!--                name: newTabName,-->
<!--                content: 'New Tab content',-->
<!--            })-->
<!--            editableTabsValue.value = newTabName-->
<!--        }-->
<!--        const removeTab = (targetName: string) => {-->
<!--            const tabs = editableTabs.value-->
<!--            let activeName = editableTabsValue.value-->
<!--            if (activeName === targetName) {-->
<!--                tabs.forEach((tab, index) => {-->
<!--                    if (tab.name === targetName) {-->
<!--                        const nextTab = tabs[index + 1] || tabs[index - 1]-->
<!--                        if (nextTab) {-->
<!--                            activeName = nextTab.name-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            }-->

<!--            editableTabsValue.value = activeName-->
<!--            editableTabs.value = tabs.filter((tab) => tab.name !== targetName)-->
<!--        }-->
<!--    </script>-->
<!--    <style>-->
<!--        .demo-tabs > .el-tabs__content {-->
<!--            padding: 32px;-->
<!--            color: #6b778c;-->
<!--            font-size: 32px;-->
<!--            font-weight: 600;-->
<!--        }-->
<!--    </style>-->



<!--    {{popoverRef}}-->
    <br/>
    <el-button v-popover="popoverRef" v-click-outside="onClickOutside">Click me</el-button>

    <el-popover
        ref="popoverRef"
        trigger="click"
        title="With title"
        virtual-triggering
        persistent>
        <span> Some content </span>
    </el-popover>


    <div>
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>The army­aligned faction involved in Sudan's civil war, which broke out in mid­April, said it would not attend a peace conference to be held under the auspices of the Intergovernmental Authority on Development in eastern Africa. </div>
                <div>参与苏丹内战的军方势力表示，他们将不会参加由东非政府间发展组织主持的和平会议，该内战于四月中爆发。</div>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>America and Saudi Arabia, which had previously arranged a series of short­lived ceasefires, have suspended their peace efforts. So there is no sign of an end to the war.</div>
                <div>此前，美国和沙特阿拉伯曾安排了一系列短暂的停火，但已暂停了他们的和平努力。因此，战争似乎没有结束的迹象。</div>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>In Guatemala a senior prosecutor persuaded a court to ban the party of Bernardo Arévalo, an anti­corruption presidential candidate who is to face Sandra Torres, a former first lady, in a run­off on August 20th. </div>
                <div>在危地马拉，一名高级检察官说服法院禁止了反腐败总统候选人贝尔纳多·阿雷瓦洛的政党，阿雷瓦洛将在8月20日的决选中与前第一夫人桑德拉·托雷斯竞争。</div>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>Mr Arévalo said the court's decision was "spurious" and would not stop him from contesting the election.</div>
                <div>阿雷瓦洛表示法院的决定是“虚假的”，不会阻止他参选。</div>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div style="clear: both">Confirmation of the results of the first round had been delayed, raising suspicions that the country's elite is trying to thwart Mr Arévalo's anti­graft campaign.</div>
                <div style="clear: both">第一轮选举结果的确认已被推迟，引发了疑虑，认为该国的精英阶层试图阻止阿雷瓦洛的反腐败运动。</div>
            </div>
        </div>
    </div>

    <el-divider>
        <el-icon><StarFilled /></el-icon>
    </el-divider>

    <div>
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>The army­aligned faction involved in Sudan's civil war, which broke out in mid­April, said it would not attend a peace conference to be held under the auspices of the Intergovernmental Authority on Development in eastern Africa. </div>
                <div>参与苏丹内战的军方势力表示，他们将不会参加由东非政府间发展组织主持的和平会议，该内战于四月中爆发。</div>
                <input type="text" style="height: 20px;width: 350px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>America and Saudi Arabia, which had previously arranged a series of short­lived ceasefires, have suspended their peace efforts. So there is no sign of an end to the war.</div>
                <div>此前，美国和沙特阿拉伯曾安排了一系列短暂的停火，但已暂停了他们的和平努力。因此，战争似乎没有结束的迹象。</div>
                <input type="text" style="height: 20px;width: 350px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>In Guatemala a senior prosecutor persuaded a court to ban the party of Bernardo Arévalo, an anti­corruption presidential candidate who is to face Sandra Torres, a former first lady, in a run­off on August 20th. </div>
                <div>在危地马拉，一名高级检察官说服法院禁止了反腐败总统候选人贝尔纳多·阿雷瓦洛的政党，阿雷瓦洛将在8月20日的决选中与前第一夫人桑德拉·托雷斯竞争。</div>
                <input type="text" style="height: 20px;width: 350px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div>Mr Arévalo said the court's decision was "spurious" and would not stop him from contesting the election.</div>
                <div>阿雷瓦洛表示法院的决定是“虚假的”，不会阻止他参选。</div>
                <input type="text" style="height: 20px;width: 350px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex">
            <div style="display: block">
                <div style="clear: both">Confirmation of the results of the first round had been delayed, raising suspicions that the country's elite is trying to thwart Mr Arévalo's anti­graft campaign.</div>
                <div style="clear: both">第一轮选举结果的确认已被推迟，引发了疑虑，认为该国的精英阶层试图阻止阿雷瓦洛的反腐败运动。</div>
                <input type="text" style="height: 20px;width: 350px"/>
            </div>
        </div>
    </div>
    <el-divider>
        <el-icon><StarFilled /></el-icon>
    </el-divider>
    <div>
        <div style="max-width: 500px;display:inline-flex;border: 2px solid">
            <div style="display: block">
                <div>The army­aligned faction involved in Sudan's civil war, which broke out in mid­April, said it would not attend a peace conference to be held under the auspices of the Intergovernmental Authority on Development in eastern Africa. </div>
                <div>参与苏丹内战的军方势力表示，他们将不会参加由东非政府间发展组织主持的和平会议，该内战于四月中爆发。</div>
                <input type="text" style="height: 25px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex;border: 2px solid">
            <div style="display: block">
                <div>America and Saudi Arabia, which had previously arranged a series of short­lived ceasefires, have suspended their peace efforts. So there is no sign of an end to the war.</div>
                <div>此前，美国和沙特阿拉伯曾安排了一系列短暂的停火，但已暂停了他们的和平努力。因此，战争似乎没有结束的迹象。</div>
                <input type="text" style="height: 25px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex;border: 2px solid">
            <div style="display: block">
                <div>In Guatemala a senior prosecutor persuaded a court to ban the party of Bernardo Arévalo, an anti­corruption presidential candidate who is to face Sandra Torres, a former first lady, in a run­off on August 20th. </div>
                <div>在危地马拉，一名高级检察官说服法院禁止了反腐败总统候选人贝尔纳多·阿雷瓦洛的政党，阿雷瓦洛将在8月20日的决选中与前第一夫人桑德拉·托雷斯竞争。</div>
                <input type="text" style="height: 25px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex;border: 2px solid">
            <div style="display: block">
                <div>Mr Arévalo said the court's decision was "spurious" and would not stop him from contesting the election.</div>
                <div>阿雷瓦洛表示法院的决定是“虚假的”，不会阻止他参选。</div>
                <input type="text" style="height: 25px"/>
            </div>
        </div>
        <!--  <div style="max-width: 500px;float: left;border: 2px solid">-->
        <div style="max-width: 500px;display:inline-flex;border: 2px solid">
            <div style="display: block">
                <div style="clear: both">Confirmation of the results of the first round had been delayed, raising suspicions that the country's elite is trying to thwart Mr Arévalo's anti­graft campaign.</div>
                <div style="clear: both">第一轮选举结果的确认已被推迟，引发了疑虑，认为该国的精英阶层试图阻止阿雷瓦洛的反腐败运动。</div>
                <input type="text" style="height: 25px"/>
            </div>
        </div>
    </div>
</template>

<style scoped>
.el-button + .el-button {
    margin-left: 8px;
}

.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

:deep(.el-tabs__item){
    padding: 0 2px;
    padding-right: 5px;
}

.el-tabs--top.el-tabs--border-card>:deep(.el-tabs__header .el-tabs__item:nth-child(2)){
    padding-left:2px;
}
</style>